/**
 * 订单修改成本弹框
 * Add by LG 2024-12
 */
<template>
    <kdx-modal-frame v-model="value" title="修改成本" :width="900" @on-cancel="handleCancel" @on-ok="handleOk">
        <div class="order-list-change-cost-price">
            <div class="header">
                <kdx-hint-alert type="error">订单如果涉及到 <span class="bold">运费 </span>的小额退费及补交运费订单，请根据相关订单计算后填写<span class="bold">改价后商品小计成本</span> </kdx-hint-alert>
            </div>
            <!--列表-->
            <div class="change-cost-price-list">
                <change-cost-price-list :data="data.order_goods" @on-change="changeCostPrice"></change-cost-price-list>
            </div>
            <!--合计-->
            <div class="shop-total">
                <div class="shop-total-content">
                    <div class="shop-total-content-item">
                      <div class="label">运费：</div>
                      <div class="price">￥{{data.dispatch_price}}</div>
                    </div>
                    <div class="shop-total-content-item">
                        <div class="label">商品原成本合计：</div>
                        <div class="price">￥{{data.total_cost_price}}</div>
                    </div>
                    <div class="shop-total-content-item">
                        <div class="label">
                          商品实成本合计 <span class="change-cost-price-tag" v-show="totalChange">改</span>：
                        </div>
                        <div class="price emphasize">￥{{data.change_total_cost_price}}</div>
                    </div>
                </div>
            </div>
            <!--备注及验证-->
            <div class="footer">
                <Form ref="form" :model="data" :rules="rules" :label-width="80">
                  <div class="left-asider width-350">
                    <FormItem label="备注：" prop="change_reason">
                      <Input type="textarea" v-model="data.change_reason" autofocus maxlength="100" show-word-limit placeholder="请备注原因"/>
                      <kdx-hint-text>备注原因会同步在订单商家备注上</kdx-hint-text>
                    </FormItem>
                  </div>
                  <div class="right-asider width-300">
                    <FormItem label="密码：" prop="password">
                      <Input v-model="data.password" :type="showPassword? 'password' : 'text'"
                             :icon="showPassword? ' iconfont icon-eye-off': ' iconfont icon-eye'"
                             placeholder="请输入管理员密码"
                             @on-click="passwordClick" />
                      <kdx-hint-text>预防误操作，请输入管理员密码进行操作</kdx-hint-text>
                    </FormItem>
                  </div>
                </Form>
            </div>
        </div>
    </kdx-modal-frame>
</template>

<script>
    import ChangeCostPriceList from "./components/ChangeCostPriceList";

    export default {
        name: "index",
        components: {ChangeCostPriceList},
        props: {
            id: {
                type: [Number, String],
                required: true
            }
        },
        data() {
            return {
                value: false,
                data: {
                  order_id: '',
                  change_reason: '',
                  password: '',
                  dispatch_price: 0.00,
                  total_cost_price: 0.00,
                  change_total_cost_price: 0.00,
                  order_goods: [
                    {
                      cost_price: 0.00,
                      change_cost_price: 0.00,
                    }
                  ]
                },
                rules: {
                  change_reason: [
                    {required: true, message: '请输入备注原因'}
                  ],
                  password: [
                    {required: true, message: '请输入管理员密码'}
                  ]
                },
                showPassword: true,
                totalChange: false,
                loading: false,
            };
        },
        computed: {},
        methods: {
            setValue() {
                this.value = !this.value;
                if (this.value) {
                    this.reset();
                    this.getData();
                }
            },
            handleCancel() {
                this.value = false;
                this.data.change_reason = '';
            },
            handleOk() {
                if (parseFloat(this.data.total_cost_price) == parseFloat(this.data.change_total_cost_price)) {
                  return this.$Message.error('订单商品成本总计没有变化');
                }
                this.$refs['form'].validate(valid => {
                  if (valid) {
                    let params = {
                      order_id: this.id,
                      change_reason: this.data.change_reason,
                      password: this.data.password,
                      change_order_goods: this.data.order_goods,
                    };
                    if(this.loading ) return;
                    this.loading = true;
                    this.$api.orderApi.setChangeCostPrice(params).then(res => {
                      if (res.error === 0) {
                        this.$Message.success('订单修改成本成功');
                        this.setValue();
                        this.$emit('on-refresh');
                      }
                    }).finally(()=> {
                      this.loading = false
                    });
                  }
                });
            },
            passwordClick() {
              this.showPassword = !this.showPassword;
            },
            /**
             * 修改成本价
             * @param index 索引
             * @param value 数值
             * @constructor
             */
            changeCostPrice(index, value) {
                this.totalChange = true;
                this.$set(this.data.order_goods[index], 'change_cost_price', value);
                this.calculateShopCostPriceTotal();
                this.data.order_goods = JSON.parse(JSON.stringify(this.data.order_goods));
            },
            // 计算商品成本合计
            calculateShopCostPriceTotal() {
                let total = 0;
                this.data.order_goods.forEach(item => {
                    total += parseFloat(item.change_cost_price);
                });
                this.data.change_total_cost_price = total.toFixed(2);
            },
            getData() {
                this.$api.orderApi.getChangeCostPrice({order_id: this.id})
                    .then(res => {
                        if (res.error === 0) {
                            this.initData(res);
                        }
                    });
            },
            initData(data) {
                let total = 0;
                data.order_goods.forEach(item => {
                    item.change_cost_price = item.cost_price;
                    total += parseFloat(item.change_cost_price);
                });
                data.change_total_cost_price = total.toFixed(2);
                data.total_cost_price = data.total_cost_price.toFixed(2);
                this.data = data;
            },
            reset() {
                this.totalChange = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    .order-list-change-cost-price {
        padding: 20px;

        > .header {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding-bottom: 10px;

            .ivu-alert {
                color: $danger-color;
                background-color: $danger-light;
                border-color: $danger-color;

                ::v-deep .ivu-alert-icon {
                    color: $danger-color;
                }
            }
        }

        > .change-cost-price-list {
            padding: 10px 0;
        }

        > .footer {
          padding: 20px 10px 0;
          height: 120px;
          background-color: $background-color;

          .left-asider {
            float: left;
          }
          .right-asider {
            float: right;
          }
        }

      // 商品合计
        .shop-total {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;

            > .shop-total-content {
                > .shop-total-content-item {
                    padding-bottom: 10px;
                    padding-right: 20px;
                    @include font-14-20;
                    color: $text-first;

                    > .label {
                        display: inline-block;
                        width: 150px;
                        text-align: right;

                        > .change-cost-price-tag {
                            @include font-12-16;
                            color: $danger-color;
                            background-color: $danger-light;
                            border-radius: 2px;
                            padding: 1px 3px;
                        }
                    }

                    > .price {
                        display: inline-block;
                        padding-left: 10px;
                    }
                }

                // 强调
                .emphasize {
                    @include font-14-20-bold;
                    color: $danger-color;
                    .price {
                        font-size: 16px;
                    }
                }
            }
        }
    }
</style>
